<template>
	<view class="contaner">
		<view class="header" @click="details">
			<view class="left-img">
				<image src="" mode="widthFix" class="image"></image>
			</view>
			<view class="rig-text">
				<view>
					<text class="name">{{doctorList.name}}</text>
					<text class="type"> {{doctorList.doctor_job}}</text>
				</view>
				<text class="contents">{{doctorList.content}}</text>
			</view>
		</view>
		<view class="footer">
			<view class="">
				<text>￥{{doctorList.price}}</text>
				<button class="mini-btn" size="mini" @click="handler" :class="{disabled:doctorList.num==0}"
					:disabled="doctorList.num==0">剩余 {{doctorList.num}}</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ['doctorList'],
		setup(props, context) {

			const details = () => {
				uni.navigateTo({
					url:"/pages/home/bookingReg/doctorInfo/doctorInfo?item="+JSON.stringify(props.doctorList)
				})
			}
			const handler = () => {
				context.emit('boctoref', props.doctorList)
			}

			return {
				details,
				handler
			}

		}
	}
</script>

<style lang="scss">
	.contaner {
		box-sizing: border-box;
		padding: 0 24rpx;
		border-radius: 20rpx;
		border: 1px solid #F0F8FF;
		margin-bottom: 24rpx;

		.header {
			height: 160rpx;
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;
			display: flex;
		}

		.left-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background-color: #eee;
			margin-right: 20rpx;

			.image {
				width: 100%;
				height: 100%;
			}
		}

		.rig-text {
			display: flex;
			flex-flow: column;
			justify-content: space-between;
            width: 70%;
			.name {
				font-size: 32rpx;
				margin-right: 10rpx;
			}

			.type {
				font-size: 28rpx;
				color: #666;
			}

			.contents {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #aaa;
				font-size: 24rpx;
				margin-top: 12rpx;
			}
		}

		.footer {
			display: flex;
			height: 100rpx;
			align-items: center;
			justify-content: flex-end;

			view {
				display: flex;
				align-items: center;
			}

			text {
				color: #FF6666;
				margin-right: 32rpx;
			}

			button {
				background-color: #0066ff;
				color: #fff;
				border: none;
				padding: 6rpx 36rpx;

				::after {
					border: none;
				}
			}

			.disabled {
				background-color: #eee;
				color: #aaa;
				outline: none;

				::after {
					border: none;
				}
			}

			::v-deep .mini-btn::after {
				border: none;
			}
		}
	}
</style>
